<template>
  <div class="bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow">
    <div class="p-5">
      <div class="flex items-center mb-4">
        <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4">
          <i :class="`fa ${icon} text-xl text-blue-500`"></i>
        </div>
        <h3 class="font-semibold text-lg">{{ title }}</h3>
      </div>
      <p class="text-gray-600 mb-4">{{ description }}</p>
      <ul class="text-gray-600 space-y-1">
        <li v-for="feature in features" :key="feature" class="flex items-center">
          <i class="fa fa-check text-green-500 mr-2"></i>
          {{ feature }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    icon: String,
    description: String,
    features: Array
  },
  created() {
    // 处理从父组件传入的字符串形式的数组
    if (typeof this.features === 'string') {
      try {
        this.parsedFeatures = JSON.parse(this.features)
      } catch (e) {
        this.parsedFeatures = []
      }
    } else {
      this.parsedFeatures = this.features
    }
  },
  computed: {
    featuresList() {
      return this.parsedFeatures || []
    }
  }
}
</script>